<template>
    <NConfigProvider
            :theme="darkTheme"
            :locale="nLocaleRef"
            :date-locale="dateZhCN"
            :theme-overrides="themeOverrides"
            className="my-config-provider"
            style="width: 100%; height: 100%"
        >
            <NNotificationProvider placement="top-right">
                <NMessageProvider>
                    <NDialogProvider>
                        <NLoadingBarProvider
                            :loading-bar-style="loadingBarStyle"
                        >
                            <slot></slot>
                        </NLoadingBarProvider>
                    </NDialogProvider>
                </NMessageProvider>
            </NNotificationProvider>
        </NConfigProvider>
</template>
<script setup lang="ts">
import { createPressedColor, createHoverColor } from '@/utils/color'
import {
    darkTheme,
    zhCN,
    enUS,
    dateZhCN,
    dateEnUS,
    NConfigProvider,
    NMessageProvider,
    NDialogProvider,
    NNotificationProvider,
    NLoadingBarProvider,
} from 'naive-ui'

import type { GlobalThemeOverrides } from 'naive-ui'
import {shallowRef} from 'vue'

const loadingBarStyle = {
    loading: 'height:6px',
    error: 'height:6px',
}

let primary_color = '#639ee2'
const themeOverrides = {
    common: {
        primaryColor: primary_color,
        primaryColorHover: createHoverColor(primary_color),
        primaryColorPressed: createPressedColor(primary_color),  
    },
    Switch:{
        railColorActive:primary_color,
    }
} as GlobalThemeOverrides


const nLocaleRef = shallowRef(zhCN)

const nDateLocaleRef = shallowRef(dateZhCN)




</script>
<script lang="ts">
export default {
    name: 'AppProvider',
}
</script>
